<template>
  <div class="checkbox">
      <!-- 头部跳转 -->
    <div class="checkbox1">
        <!-- <vxe-icon name="arrow-left" @click="goback()"></vxe-icon> -->
        <p>入住办理</p>
    </div>
  </div>
<!-- 内容表格 -->
<div class="checkbox2">
    <el-tabs class="checkboxcon" stretch="true" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane class="checkboxcon1" label="老人基本信息设置" name="first">
            <div class="checkboxcon1top">
                <P>老人基本信息设置</P>
                <vxe-button class="admserbtn" content="保存" status="primary" ></vxe-button>
            </div>
            <table>
                <tr>
                    <td>登记时间</td>
                    <td> <vxe-input  v-model="obj.CheckedinTime" style="width: 100%;height: 100%;border: none;" placeholder="日期选择" type="date"></vxe-input></td>
                    <td>经办人</td>
                    <td> <vxe-input v-model="obj.ManageName" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td colspan="4">老人信息填写</td>
                </tr>
                <tr>
                    <td>老人姓名</td>
                    <td><vxe-input v-model="obj.OlderName" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>老人身份证号码</td>
                    <td><vxe-input v-model="obj.OlderIdCard" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><vxe-input v-model="obj.OlderSex" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>生日</td>
                    <td><vxe-input v-model="obj.OlderBirthday" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>联系电话</td>
                    <td><vxe-input v-model="obj.OlderPhone" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>血型</td>
                    <td><vxe-input v-model="obj.OlderBloodType" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>籍贯</td>
                    <td><vxe-input v-model="obj.OlderNative" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>民族</td>
                    <td><vxe-input v-model="obj.OlderNation" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>婚姻状态</td>
                    <td><vxe-input v-model="obj.OlderMarriage" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>宗教信仰</td>
                    <td><vxe-input v-model="obj.OlderReligion" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>文化程度</td>
                    <td><vxe-input v-model="obj.OlderCultureLevel" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>是否签订合同</td>
                    <td><vxe-input v-model="obj.OlderIsgian" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>现住址</td>
                    <td><vxe-input v-model="obj.OlderNowAddress" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>户籍住址</td>
                    <td><vxe-input v-model="obj.OlderLocalAddress" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>是否本地户籍</td>
                    <td><vxe-input v-model="obj.OlderIslocal" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>原居住情况</td>
                    <td><vxe-input v-model="obj.OlderOriginAddress" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>医保卡号</td>
                    <td><vxe-input v-model="obj.MedicalCardNumber" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>入住类型</td>
                    <td><vxe-input v-model="obj.OlderCheckinType" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
            </table>
        </el-tab-pane>
        <el-tab-pane class="checkboxcon2" label="家属信息设置" name="second">
            <div class="checkboxcon2top">
                <P>家属信息设置</P>
                <vxe-button class="admserbtn" content="保存" status="primary" ></vxe-button>
            </div>
            <table>
                <tr>
                    <td>家属姓名</td>
                    <td><vxe-input v-model="obj.FamilyName" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>家属身份证</td>
                    <td><vxe-input v-model="obj.FamilyIdCard" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><vxe-input v-model="obj.FamilySex" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>与老人关系</td>
                    <td><vxe-input v-model="obj.FamilyRelation" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td>联系电话</td>
                    <td colspan="3"><vxe-input v-model="obj.FamilyPhone" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    
                </tr>
                <tr>
                    <td>现住址</td>
                    <td><vxe-input v-model="obj.FamilyNowAddress" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td>户籍住址</td>
                    <td><vxe-input v-model="obj.FamilyLocalAddress" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td rowspan="10">备用联系人</td>
                    <td>身份证号</td>
                    <td rowspan="10">联系电话</td>
                    <td>手机号</td>
                </tr>
                <tr>
                    <td><vxe-input v-model="obj.FamilyIdCard1" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td><vxe-input v-model="obj.FamilyPhone1" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td><vxe-input v-model="obj.FamilyIdCard2" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td><vxe-input v-model="obj.FamilyPhone2" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td><vxe-input v-model="obj.FamilyIdCard3" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td><vxe-input v-model="obj.FamilyPhone3" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td><vxe-input v-model="obj.FamilyIdCard4" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td><vxe-input v-model="obj.FamilyPhone4" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td><vxe-input v-model="obj.FamilyIdCard5" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td><vxe-input v-model="obj.FamilyPhone5" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td><vxe-input v-model="obj.FamilyIdCard6" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td><vxe-input v-model="obj.FamilyPhone6" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td><vxe-input v-model="obj.FamilyIdCard7" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td><vxe-input v-model="obj.FamilyPhone7" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td><vxe-input v-model="obj.FamilyIdCard8" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td><vxe-input v-model="obj.FamilyPhone8" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td><vxe-input v-model="obj.FamilyIdCard9" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                    <td><vxe-input v-model="obj.FamilyPhone9" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
            </table>
        </el-tab-pane>
        <el-tab-pane class="checkboxcon3" label="老人健康信息设置" name="third">
            <div class="checkboxcon3top">
                <P>老人健康信息</P>
                <vxe-button class="admserbtn" content="保存" status="primary" ></vxe-button>
            </div>
            <table>
                <tr>
                    <td style="width: 20%;">主要疾病</td>
                    <td style="width: 80%;height: 50px;"><vxe-input v-model="MajorDisease" placeholder="" clearable style="width: 100%;height: 100%;border: none;"></vxe-input></td>
                </tr>
                <tr>
                    <td style="width: 20%;height: 100px;">病史</td>
                    <td style="width: 80%;height: 200px;" >
                        <!-- <vxe-textarea   v-model="MedicalHistory" placeholder=""  size="medium"  clearable style="width: 100%;height: 200px;border: none;"></vxe-textarea> -->
                        <el-input
                            v-model="HealthObj.MedicalHistory"
                            style="width: 100%;height: 200px;border: none;"
                            :rows="2"
                            type="textarea"
                            placeholder="Please input"
                        />
                        
                    </td>
                </tr>
            </table>
        </el-tab-pane>
        <el-tab-pane class="checkboxcon4" label="家庭病床类型" name="fourth">
            <div class="checkboxcon4top">
                <P>家庭病床类型</P>
                <vxe-button class="admserbtn" content="保存" status="primary" ></vxe-button>
            </div>
            <table>
                <tr>
                    <td colspan="7" style="text-align: left;">
                        <button style="width: 20px;border: none;"></button>家庭病床类型
                        <vxe-select v-model="homeBedType" placeholder="多选" clearable multiple>
                          <vxe-option value="1" label="选项1"></vxe-option>
                          <vxe-option value="2" label="选项2"></vxe-option>
                          <vxe-option value="3" label="选项3"></vxe-option>
                          <vxe-option value="4" label="选项4"></vxe-option>
                          <vxe-option value="5" label="选项5"></vxe-option>
                          <vxe-option value="6" label="选项6"></vxe-option>
                          <vxe-option value="7" label="选项7"></vxe-option>
                          <vxe-option value="8" label="选项8"></vxe-option>
                        </vxe-select>
                    </td>
                </tr>
                <tr style="background: #F3F6F9;">
                    <td>家庭病床等级</td>
                    <td>---</td>
                    <td>服务类目</td>
                    <td>次数</td>
                    <td>项目费用</td>
                    <td>项目简介</td>
                </tr>
                <tr></tr>
                <tr>
                  <td>附加项</td>
                    <td>
                        <button >新增</button>
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                  <td>合计</td>
                    <td colspan="5" style="text-align: left;">
                        <!-- <button >新增</button> -->

                        <span >2222</span>
                    </td>
                  
                </tr>
            </table>
        </el-tab-pane>
        
        
    </el-tabs>
</div>
 
</template>

<script setup>
import { useRouter } from "vue-router"; //路由
const router = useRouter();
import { ref } from "vue";
//标签
const activeName = ref('first')
// import type { TabsPaneContext } from 'element-plus'
// const handleClick = (tab: TabsPaneContext, event: Event) => {
//   console.log(tab, event)
// }
const obj = ref({
    CheckedinTime: '',//日期
    ManageName: '',//经办人
    OlderName: '',//老人姓名
    OlderIdCard: '',//老人身份证号码
    OlderSex: '',//老人性别
    OlderBirthday: '',//老人生日
    OlderPhone: '',//老人联系电话
    OlderBloodType: '',//老人血型
    OlderNative: '',//老人籍贯
    OlderNation: '',//老人民族
    OlderMarriage: '',//老人婚姻状态
    OlderReligion: '',//老人宗教信仰
    OlderCultureLevel: '',//老人文化程度
    OlderIsgian: '',//老人是否签订合同
    OlderNowAddress: '',//老人现住址
    OlderLocalAddress: '',//老人户籍住址
    OlderMedicalInsuranceCard: '',//老人医保卡号
    OlderIslocal: '',//老人是否本地户籍
    OlderOriginAddress: '',//老人原居住情况
    MedicalCardNumber: '',//老人医保卡号
    OlderCheckinType: '',//老人入住类型
    })
    let goback = () => {
        router.push('/residence_management/admission_management')
    }
    const FamilyObj = ref({
        FamilyName: '',//家属姓名
        FamilyIdCard: '',//家属身份证
        FamilySex: '',//家属性别
        FamilyRelation: '',//家属与老人关系
        FamilyPhone: '',//家属联系电话
        FamilyNowAddress: '',//家属现住址
        FamilyLocalAddress: '',//家属户籍住址
        FamilyIdCard1: '',//备用家属1身份证
        FamilyPhone1: '',//备用家属1联系电话
        FamilyIdCard2: '',//备用家属2身份证
        FamilyPhone2: '',//备用家属2联系电话
        FamilyIdCard3: '',//备用家属3身份证
        FamilyPhone3: '',//备用家属3联系电话
        FamilyIdCard4: '',//备用家属4身份证
        FamilyPhone4: '',//备用家属4联系电话
        FamilyIdCard5: '',//备用家属5身份证
        FamilyPhone5: '',//备用家属5联系电话
        FamilyIdCard6: '',//备用家属6身份证
        FamilyPhone6: '',//备用家属6联系电话
        FamilyIdCard7: '',//备用家属7身份证
        FamilyPhone7: '',//备用家属7联系电话
        FamilyIdCard8: '',//备用家属8身份证
        FamilyPhone8: '',//备用家属8联系电话
        FamilyIdCard9: '',//备用家属9身份证
        FamilyPhone9: '',//备用家属9联系电话
    })
    const HealthObj = ref({
        MajorDisease: '',//主要疾病
        MedicalHistory: '',//病史
    })
    const MealExpenses = ref('')//餐食费
    const FoodBeverageExpenses = ref('')//餐饮费费用
    const TypeOfStay = ref('')//入住类型
    const TypeOfRoom = ref('')//房间类型
    const WhetherPrivateRoom = ref('')//是否包房
    const WhetherDidscount = ref('')//是否使用折扣版
    const BedSelection = ref('')//床位选择
    const BedCost = ref('')//床位费用
    //个人物品
    const activeName2 = ref('first')
    const GoodsName1 = ref("")
    const GoodsNumber1 = ref("")
    const GoodsName2 = ref("")
    const GoodsNumber2 = ref("")
    const GoodsName3 = ref("")
    const GoodsNumber3 = ref("")
    const GoodsName4 = ref("")
    const GoodsNumber4 = ref("")
    const GoodsName5 = ref("")
    const GoodsNumber5 = ref("")
    const GoodsName6 = ref("")
    const GoodsNumber6 = ref("")
    const GoodsName7 = ref("")
    const GoodsNumber7 = ref("")
    const GoodsName8 = ref("")
    const GoodsNumber8 = ref("")
    const GoodsName9 = ref("")
    const GoodsNumber9 = ref("")
    const SignNameFam1 = ref("")//物品登记老人或家属签字
    const SignNameTime1 = ref("")//物品登记老人或家属签字时间
    const SignNameDoc2 = ref("")//物品登记护理员签字
    const SignNameTime2 = ref("")//物品登记护理员签字时间
// const handleClick = (tab: TabsPaneContext, event: Event) => {
//   console.log(tab, event)
// }
//护照登记
const homemodel = ref('') //入住模式
const nursinglevel = ref('') //护照等级
const monthmoney = ref('') //月费用
const temoDetail = ref('') //项目简介
const homeBedType = ref([])
</script>
   
    
    <!-- <style scoped></style> -->
 <style scoped lang="less">
//   头部样式
.checkbox {
  width: 100%;
  height: 10vh;
//   background: red;
  display: flex;
  flex-wrap: wrap;
//   border: 1px solid #ccc;
  .checkbox1 {
    display: flex;
    justify-content: left;
    align-items: center;
    p{
        font-size: 20px;
    }
  }
}
.checkbox2 {
    width: 100%;
    height: 70vh;
    .checkboxcon{
        .checkboxcon1{
            .checkboxcon1top{
                width: 100%;
                height: 50px;
                background: #F3F6F9;
                text-align: center;
                position: relative;
                box-sizing: border-box;
                padding: 0 30px;
                p{
                    height: 50px;
                    line-height: 50px;
                    font-size: 20px;
                }
                .vxe-button {
                    position: absolute;
                    right: 30px;
                    top: 10px;
                    width: 100px;
                    border-radius: 11px;
                }
            }
            table{
                width: 100%;
                border: 1px solid #ccc;
                border-collapse: collapse;
                height: 50px;
                td{
                    border: 1px solid #ccc;
                    width: 25%;
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                    
                }
            }
        }
        .checkboxcon2{
            .checkboxcon2top{
                width: 100%;
                height: 50px;
                background: #F3F6F9;
                text-align: center;
                position: relative;
                box-sizing: border-box;
                padding: 0 30px;
                p{
                    height: 50px;
                    line-height: 50px;
                    font-size: 20px;
                }
                .vxe-button {
                    position: absolute;
                    right: 30px;
                    top: 10px;
                    width: 100px;
                    border-radius: 11px;
                }
            }
            table{
                width: 100%;
                border: 1px solid #ccc;
                border-collapse: collapse;
                height: 50px;
                td{
                    border: 1px solid #ccc;
                    width: 25%;
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                }
            }
        }
        .checkboxcon3{
            .checkboxcon3top{
                width: 100%;
                height: 50px;
                background: #F3F6F9;
                text-align: center;
                position: relative;
                box-sizing: border-box;
                padding: 0 30px;
                p{
                    height: 50px;
                    line-height: 50px;
                    font-size: 20px;
                }
                .vxe-button {
                    position: absolute;
                    right: 30px;
                    top: 10px;
                    width: 100px;
                    border-radius: 11px;
                }
            }
            table{
                width: 100%;
                border: 1px solid #ccc;
                border-collapse: collapse;
                height: 50px;
                td{
                    border: 1px solid #ccc;
                    width: 25%;
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                }
            }
        }
        .checkboxcon4{
            min-height: 600px;
            .checkboxcon4top{
                width: 100%;
                height: 50px;
                background: #F3F6F9;
                text-align: center;
                // position: relative;
                // box-sizing: border-box;
                
                padding: 0 30px;
                p{
                    height: 50px;
                    line-height: 50px;
                    font-size: 20px;
                }
                .vxe-button {
                    position: absolute;
                    right: 30px;
                    top: 10px;
                    width: 100px;
                    border-radius: 11px;
                }
            }
            table{
                z-index:19999;
                width: 100%;
                border-collapse: collapse;
                height: 50px;
               
                td{
                    border: 1px solid #ccc;
                    // width: 25%;
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                  
                }
            }
        }
        .checkboxcon5{
                min-height: 600px;
            .checkboxcon5top{
                width: 100%;
                height: 50px;
                background: #F3F6F9;
                text-align: center;
                // position: relative;
                // box-sizing: border-box;
                
                padding: 0 30px;
                p{
                    height: 50px;
                    line-height: 50px;
                    font-size: 20px;
                }
                .vxe-button {
                    position: absolute;
                    right: 30px;
                    top: 10px;
                    width: 100px;
                    border-radius: 11px;
                }
            }
            table{
                z-index:19999;
                width: 100%;
                border-collapse: collapse;
                height: 50px;
               
                td{
                    border: 1px solid #ccc;
                    width: 25%;
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                  
                }
            }
            .checkboxcon5top2{
                width: 100%;
                height: 50px;
                background: #F3F6F9;
                text-align: center;
                position: relative;
                box-sizing: border-box;
                padding: 0 30px;
                p{
                    height: 50px;
                    line-height: 50px;
                    font-size: 20px;
                }
                .vxe-button {
                    
                    position: absolute;
                    right: 30px;
                    top: 10px;
                    width: 100px;
                    border-radius: 11px;
                }
            }
            .checkboxcon5top3{
                width: 100%;
                height: 100px;
                display: flex;
               
                .checkboxcon5top3div{
           
                    height: 50px;
                    width: 25%;
                    line-height: 50px;
                    text-align: center;
                    border: 1px solid #ccc;

                }
                
            }
        }
        .checkboxcon6{
            .checkboxcon6top{
                width: 900px;
                margin: auto;
                height: 700px;
                border: 1px solid #5676F7;
                border-radius: 10px;
                .con6topdiv1{
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    background: #F3F6F9;
                    display: flex;
                    p{
                        position: absolute;
                        right: 380px;
                    }
                    .admserbtn1{
                        position: absolute;
                        right: 30px;
                        top: 10px;
                        width: 100px;
                        border-radius: 11px;
                    }
                    .admserbtn2{
                        position: absolute;
                        right: 150px;
                        top: 10px;
                        width: 100px;
                        border-radius: 11px;
                    }
                }
                table{
                z-index:19999;
                width: 100%;
                border-collapse: collapse;
                height: 50px;
               
                td{
                    border: 1px solid #ccc;
                    width: 25%;
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                  
                }
            }
        }
    }
    
    }
  }
</style>